<template>
  <div class="select-item select-item-range">
    <el-popover placement="bottom"
      ref="popover"
      @show="selectRangeFocus = true"
      @hide="selectRangeFocus = false"
      popper-class="select-ipt-range-popper">
      <div class="list-box">
        <div class="list">
          <div class="number-range">
            <el-input-number controls-position="right"
              :placeholder="$t('min')"
              v-model="rangeMin"
              @keyup.enter.native="handleRangeChange"
              :min="rangeMin!==null && rangeMin!=='' ? 0 : null"
              :max="rangeMax !== null && rangeMax !== '' ? rangeMax : selectItem.list[1]" />
            <span class="unit"
              v-if="!selectItem.isNumber">%</span>
            <em></em>
            <el-input-number controls-position="right"
              :min="rangeMin!==null && rangeMin!=='' ? rangeMin : null"
              :max="selectItem.list[1] ? selectItem.list[1] : 100"
              v-model="rangeMax"
              @keyup.enter.native="handleRangeChange"
              :placeholder="$t('max')" />
            <span class="unit"
              v-if="!selectItem.isNumber">%</span>
          </div>
        </div>
        <div class="fast-select-options"
          v-if="fastSelectOptions && fastSelectOptions.length > 0">
          <common-link :path="$route.params.lang?$route.path.replace(`/${$route.params.lang}`,''):$route.path"
            :query="resetPath(item)"
            :key="key"
            v-for="(item, key) in fastSelectOptions"
            class="f-items go-range-change">
            <label class="el-radio"
              :class="{'is-checked': isVal(item)}">
              <span class="el-radio__input"
                :class="{'is-checked': isVal(item)}">
                <span class="el-radio__inner"></span>
                <input type="radio"
                  autocomplete="off"
                  :value="item.label"
                  class="el-radio__original">
              </span>
              <span class="el-radio__label">
                {{item.label}}
              </span>
            </label>
          </common-link>
        </div>
        <div class="select-footer">
          <el-button type="text"
            class="btn-reset to-change-range"
            size="mini"
            @click="handleRangeChange">
            {{ $t("rangSureBtn") }}</el-button>
        </div>
      </div>
      <template v-slot:reference>
        <div class="el-select select-range"
          :class="{
           'hasVal': hasVal
          }">
          <div class="el-input"
            :class="{
              'is-focus': selectRangeFocus
            }">
            <div :class="{'selected': hasVal}"
              class="group">
              <button type="button"
                class="dropdown inline-flex items-center w-full justify-center bg-gray-2100 px-3 text-sm font-medium text-gray-1000 hover:bg-purple-100 hover:bg-purple-1300 hover:text-white group-hover:bg-purple-1300 group-hover:text-white">
                <span class="whitespace-nowrap truncate">{{ hasVal ? rangeValueCustomLabel : $t(selectItem.label) }}</span>

                <svg class="-mr-1 ml-2 h-5 w-5 arrow"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  aria-hidden="true"
                  :class="{show: selectRangeFocus}">
                  <path fill-rule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
                    clip-rule="evenodd" />
                </svg>
              </button>

              <span @click.stop="clear"
                v-if="hasVal"
                class="to-reset-range">
                <svg-icon className="delBtn"
                  iconName='delete_white'></svg-icon>
              </span>
            </div>
          </div>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<script>
import Clickoutside from 'element-ui/src/utils/clickoutside'
export default {
  name: '',
  props: {
    keyword: {
      type: String,
      default: '',
    },
    select: {
      require: true,
      type: Object,
      defalut() {
        return {}
      },
    },
    fastSelectOptions: {
      type: Array,
      defalut() {
        return []
      },
    },
  },
  computed: {
    curLan() {
      return this.$store.state.locale
    },
    hasVal() {
      if (
        (this.rangeMin !== null && this.rangeMin !== '') ||
        (this.rangeMax !== null && this.rangeMax !== '')
      ) {
        return true
      } else {
        return false
      }
    },
  },
  directives: { Clickoutside },
  data() {
    return {
      selectWidth: 450,
      selectRangeFocus: false,
      selectInputFocus: false,
      rangeValueCustomLabel: '',
      selectItem: {},

      rangeMin: null,
      rangeMax: null,

      isShowRange: false,
    }
  },
  watch: {
    '$store.state.locale': {
      immediate: false,
      handler() {
        this.rangeValueCustomLabel = this.initRangeLabel()
      },
    },
    select: {
      handler(select) {
        this.selectItem = select
        const val = this.select.rangeValue

        if (!(val && JSON.stringify(val) !== '[]')) {
          this.rangeMin = null
          this.rangeMax = null
        }
        this.rangeValueCustomLabel = this.initRangeLabel()
      },
      immediate: true,
      deep: true, //true 深度监听
    },
    $route: {
      handler() {
        if (this.$refs.popover) {
          this.$refs.popover.doClose()
        }

        let rangeMin = this.$route.query[`${this.select.query_name}_start`]
        let rangeMax = this.$route.query[`${this.select.query_name}_end`]

        /* if (rangeMin && !rangeMax) {
          rangeMax = 100
        }
        if (rangeMax && !rangeMin) {
          rangeMin = 0
        } */

        if (rangeMin || rangeMax) {
          if (this.isTrueNumber(rangeMax)) {
            this.rangeMax = parseInt(rangeMax)
          }
          if (this.isTrueNumber(rangeMin)) {
            this.rangeMin = parseInt(rangeMin)
          }
        } else {
          this.rangeMax = null
          this.rangeMin = null
        }

        this.rangeValueCustomLabel = this.initRangeLabel()
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.rangeValueCustomLabel = this.initRangeLabel()
    if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
      this.selectWidth = 320
    }
  },
  methods: {
    handleRangeChange() {
      this.rangeValueCustomLabel = this.initRangeLabel()

      /* if (this.rangeMin && !this.rangeMax) {
        this.rangeMax = this.select.list[1]
      }
      if (this.rangeMax && !this.rangeMin) {
        this.rangeMin = 0
      } */

      //执行搜索
      /* this.$emit(
        'changeRange',
        this.select.label,
        range,
        this.rangeValueCustomLabel
      ) */

      let req = {
        ...this.$route.query,
      }

      req[`${this.select.query_name}_start`] = this.isTrueVal(this.rangeMin)
        ? this.rangeMin
        : null
      req[`${this.select.query_name}_end`] = this.isTrueVal(this.rangeMax)
        ? this.rangeMax
        : null

      for (let key in req) {
        if (req[key] === null || req[key] === '') {
          delete req[key]
        }
      }

      this.$router.push({
        path: this.$route.path,
        query: {
          ...req,
        },
      })

      if (this.$refs.popover) {
        this.$refs.popover.doClose()
      }
    },
    clear() {
      this.rangeMin = null
      this.rangeMax = null

      this.handleRangeChange()
    },
    initRangeLabel() {
      //转化值的显示
      let showRangeVal = ''

      if (this.rangeMin && this.rangeMax) {
        showRangeVal =
          this.$t('rangeFrom') +
          ' ' +
          this.rangeMin +
          `${this.selectItem.isNumber ? '' : '%'}` +
          ' ' +
          this.$t('rangeTo') +
          ' ' +
          this.rangeMax +
          `${this.selectItem.isNumber ? '' : '%'}`
      } else if (this.rangeMin) {
        showRangeVal =
          this.$t('rangeMoreThan') +
          ' ' +
          this.rangeMin +
          `${this.selectItem.isNumber ? '' : '%'}`
      } else if (this.rangeMax) {
        showRangeVal =
          this.$t('rangeLessThan') +
          ' ' +
          this.rangeMax +
          `${this.selectItem.isNumber ? '' : '%'}`
      } else {
        showRangeVal =
          this.$t('rangeFrom') +
          ' ' +
          this.selectItem.list[0] +
          `${this.selectItem.isNumber ? '' : '%'}` +
          ' ' +
          this.$t('rangeTo') +
          ' ' +
          this.selectItem.list[1] +
          `${this.selectItem.isNumber ? '' : '%'}`
      }

      return showRangeVal
    },

    /* 链接 */
    resetPath(item) {
      let newPath = { ...this.$route.query }
      newPath[`${this.select.query_name}_start`] = item.rangeMin
      newPath[`${this.select.query_name}_end`] = item.rangeMax
      /* let val = `${this.targetObj.handle}-${tItem.handle}`

      if (newPath.attributes && val === newPath.attributes) {
        delete newPath.attributes
      } else {
        newPath.attributes = val
      } */

      for (let key in newPath) {
        if (newPath[key] === null || newPath[key] === '') {
          delete newPath[key]
        }
      }

      return { ...newPath }
    },

    isVal(item) {
      if (
        this.isTrueNumber(this.rangeMin) &&
        this.isTrueNumber(this.rangeMax) &&
        parseInt(this.rangeMin) === item.rangeMin &&
        parseInt(this.rangeMax) === item.rangeMax
      ) {
        return true
      } else {
        return false
      }
    },
    isTrueNumber(val) {
      if (val !== null && val !== '' && typeof val !== 'undefined') {
        return true
      } else {
        return false
      }
    },
    isTrueVal(val) {
      if (typeof val != 'undefined' && val !== null && val !== '') {
        return true
      } else {
        return false
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.select-item-range > span {
  width: 100%;
}
.select-range {
  width: 100%;
}
.list-box {
  position: relative;
  .list {
    padding: 16px;
    border-bottom: 1px solid #e5e5e5;
    .range-value {
      margin-bottom: 14px;
    }
  }
}
.number-range {
  display: flex;
  align-items: center;
  white-space: nowrap;
  & > em {
    display: block;
    margin: 0 8px;
    width: 12px;
    height: 1px;
    background: #7f7f7f;
    border-radius: 1px;
  }
  .unit {
    font-size: 14px;
    color: #191919;
    margin-left: -21px;
    z-index: 2;
    padding-right: 8px;
  }
  ::v-deep .el-input-number {
    width: 80px;
    .el-input-number__decrease,
    .el-input-number__increase {
      display: none;
    }
    .el-input__inner {
      padding-left: 10px;
      padding-right: 10px;
      font-size: 14px;
      text-align: left;
      max-width: 146px;
      &::-webkit-input-placeholder {
        color: #7f7f7f;
      }
    }
  }
}
.fast-select-options {
  border-bottom: 1px solid #e5e5e5;
  padding: 16px;
  .el-radio-group {
    width: 100%;
  }
  ::v-deep .el-radio {
    width: 100%;
    display: flex;
    align-items: center;
    .el-radio__inner {
      width: 16px;
      height: 16px;
      &::after {
        width: 6px;
        height: 6px;
        border-radius: 50%;
      }
    }
    &:hover {
      color: #7150e6;
      .el-radio__inner {
        border: 1px solid #7150e6;
      }
    }
    & + .el-radio {
      margin-top: 16px;
    }
  }
  .f-items {
    display: block;
    & + .f-items {
      margin-top: 16px;
    }
    .el-radio {
      display: flex;
      align-items: center;
      .el-radio__inner {
        width: 16px;
        height: 16px;
        &::after {
          width: 6px;
          height: 6px;
          border-radius: 50%;
        }
      }
      &:hover {
        color: #7150e6;
        .el-radio__inner {
          border: 1px solid #7150e6;
        }
      }
    }
  }
}
.select-footer {
  .btn-reset {
    font-size: 14px;
    height: 44px;
    width: 100%;
    &.is-disabled {
      color: #7150e6;
    }
  }
}
.select-item {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  .el-input {
    display: flex;
    align-items: center;
    line-height: 34px;
    .el-input__inner {
      height: 34px;
      line-height: 34px;
      color: #191919;
      &::-webkit-input-placeholder {
        color: #191919 !important;
      }
    }
    .el-input__icon {
      line-height: 34px;
      &.el-icon-circle-close {
        display: none;
      }
    }
    &:hover {
      .el-icon-circle-close {
        display: block;
        & + .el-icon-arrow-up {
          display: none;
        }
      }
    }
  }
  .more {
    display: none;
    position: absolute;
    right: 32px;
    top: 20px;
    color: #b0a3a3;
    line-height: 0;
  }
}

.dropdown {
  height: 34px;
  border-radius: 17px;
  svg {
    transition: 0.2s;
    &.show {
      transform: rotate(180deg);
    }
  }
}
.group {
  height: 34px;
}
.delBtn {
  display: none;
}
.selected {
  position: relative;
  font-size: 0;
  &:hover {
    button {
      padding-right: 36px !important;
      transition: all 0 !important;
    }
    .arrow {
      display: none !important;
      transition: all 0 !important;
    }
    .delBtn {
      position: absolute;
      right: 10px;
      top: 17px;
      transform: translateY(-50%);
      display: block;
      font-size: 20px;
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
    }
  }
}
</style>
